import React, { VFC, useEffect, useState} from "react";
import { Form, Radio, Button, DatePicker,ConfigProvider, message, Modal } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

import { saveOrUpdateProjectIssuePhase} from '@services/index';
import { useRecoilValue } from 'recoil';
import { fetchProjectAllList, fetchProjectIssueAllList, fetchPhaseAllList } from '@selectors/selectProduct';
import MySelect from './mySelect';
import { pick} from '@tools/utils';
import { GetDIC } from '@api/index'

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

type PropsType = {
    dataInfo?:any[]|null
    onCancel:() => void
    isVisible:boolean
}
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};

const Edit:VFC = (props:PropsType) => {
    const initFormInfo = {
        projectId:undefined,
        phaseId:undefined,
        issueId:undefined,
        startDay:undefined,
        endDay:undefined,
        status: 0
    }
    const dateFormat = 'YYYY-MM-DD';
    const dateFormatList = ['YYYY-MM-DD', 'YY-MM-DD'];
    const DIC_yesornoStatus = GetDIC('yesornoStatus');
    const {dataInfo, isVisible, onCancel} = props;
    const [formInfo, setFormInfo] = useState<any>(initFormInfo);
    const [times, setTimes] = useState<any>([]);
    useEffect(()=>{
        if(dataInfo) setFormInfo(dataInfo)
    }, []);

    // 修改输入框值
    const onChange = (e:any, type:string) => {
        setFormInfo({
            ...formInfo,
            [type]: e?.target?e.target.value:e
        })
    }
    //时间改变的方法
    const onPickerChange=(date: any,dateString: any[])=>{
        setFormInfo({
            ...formInfo,
            startDay: dateString[0],
            endDay: dateString[1]
        })
    }
    // 提交表单数据
    const submit = async () => {
        const params = pick(formInfo, [
            // "id",
            "projectId",
            "phaseId",
            "issueId",
            "startDay",
            "endDay",
            "status"
        ]);
        const { data, status } = await saveOrUpdateProjectIssuePhase(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }else{
            message.error(data.msg);
        }
    };
    
    return (
        <Modal visible={isVisible}  title={dataInfo?"编辑":"添加"} onCancel={onCancel} footer={false}>
            <Form {...layout}>
                <FormItem label="所属项目">
                    <MySelect dataList={useRecoilValue(fetchProjectAllList)} mode={undefined} type='project' selectValue={formInfo.projectId} onChange={e => onChange(e, 'projectId')} />
                </FormItem>
                <FormItem label="所属阶段">
                    <MySelect dataList={useRecoilValue(fetchPhaseAllList)} mode={undefined} selectValue={formInfo.phaseId} onChange={e => onChange(e, 'phaseId')} />
                </FormItem>
                <FormItem label="项目期数" wrapperCol={{'span': 8}}>
                    <MySelect dataList={useRecoilValue(fetchProjectIssueAllList)} mode={undefined} selectValue={formInfo.issueId} onChange={e => onChange(e, 'issueId')} />
                </FormItem>
                <FormItem label="起止时间">
                    <ConfigProvider locale={zh_CN}>
                    <RangePicker
                    value={!formInfo.startDay||!formInfo.endDay?[]:[moment(formInfo.startDay, dateFormat), moment(formInfo.endDay, dateFormat)]}
                    format={dateFormat} onChange={onPickerChange} placeholder={['开始时间','结束时间']}
                    />
                    </ConfigProvider>
                </FormItem>
                <FormItem label="是否开启">
                    <Radio.Group onChange={ e => onChange(e, 'status')} value={formInfo.status}>
                        {Object.keys(DIC_yesornoStatus).map(key => {
                            return <Radio  value={key} key={key}>{DIC_yesornoStatus[key]}</Radio>
                        })
                        }
                    </Radio.Group>
                </FormItem>
                <FormItem wrapperCol={{ offset: 10, span: 16 }}>
                    <Button type="primary" onClick={submit}>提交</Button>
                </FormItem>
            </Form>
        </Modal>
    )
}
export default Edit
